<div id="search-component">
    <h4>Hero Search</h4>
    <input #searchBox id="search-box" type="text" (keyup)="search(searchBox.value)" />
    <div>
        <!--The heroes property is now an Observable of hero arrays, rather than just a hero array. 
        The *ngFor can't do anything with an Observable until we flow it through the async pipe (AsyncPipe). 
        The async pipe subscribes to the Observable and produces the array of heroes to *ngFor.-->
        <div *ngFor="let hero of heroes$ | async; trackBy: trackByHeroes" (click)="gotoDetail(hero)" class="search-result">
            {{hero.name}}
        </div>
    </div>
</div>